<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <h2>音频分析器</h2>

        <!---->
        <p>
            <pre>处理并为其他元素提供音频数据。

片段/条形元素的值取决于来自此元素的输出。所有“鼓点”变量也由此元素提供。</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <dl>
            <dt id="sampleProvider">输出选择</dt>
            <dd>
                <p>输出选择类型。</p>
                <!--2-->
                <div class="pborder">
                    <h6>频谱</h6>
                    <dl>
                        <dt id="sampleOutCount">输出样本数</dt>
                        <dd>
                            <p>频谱值的输出数量。</p>
                        </dd>
                        <dt id="mirrorSamples">镜像输出</dt>
                        <dd>
                            <p>如果设置，后半部分将被镜像。</p>
                        </dd>
                        <dt id="repeatSamples">重复次数</dt>
                        <dd>
                            <p>指定值在<property query="sampleOutCount">输出样本数</property>中重复的次数。</p>
                        </dd>
                        <dt id="starAndEndGap">起始和结束间隙</dt>
                        <dd>
                            <p>在输出的开头和结尾插入零值。</p>
                        </dd>
                        <dt id="smooth">平滑</dt>
                        <dd>
                            <p>控制音频反应的平滑度。</p>
                        </dd>
                        <dt id="preSmooth">预平滑</dt>
                        <dd>
                            <p>控制音频反应的平滑度。这是实验性属性(可能有问题)，与<property query="smooth">平滑</property>非常相似。</p>
                        </dd>
                        <dt id="filterRadius">滤波半径</dt>
                        <dd>
                            <p>扩展滤波器以突出单个值。</p>
                        </dd>
                        <dt id="filterStrength">滤波强度</dt>
                        <dd>
                            <p>单个值突出显示的强度。</p>
                        </dd>
                        <dt id="aWeight">A权重</dt>
                        <dd>
                            <p>增加此值将使较低频率的值消失。（例如消除低音）。</p>
                        </dd>
                        <dt id="outputMultiplier">输出增强倍率</dt>
                        <dd>
                            <p>增强输出值。</p>
                        </dd>

                        <hr>

                        <dt id="lowerHz">低频截止频率</dt>
                        <dd>
                            <p>第一个频谱值的频率。</p>
                        </dd>
                        <dt id="higherHz">高频截止频率</dt>
                        <dd>
                            <p>最后一个频谱值的频率。</p>
                        </dd>
                        <dt id="hzLinearFactor">频率分布线性度</dt>
                        <dd>
                            <p>控制较低频率值的传播。减小此值将使低音值在频谱上更加突出。</p>
                            <p>
                                注：线性分布：频率从0-20000均匀分布<br>
                                &nbsp; &nbsp; &nbsp;&nbsp;非线性分布：低频占比较大，高频会被压缩
                            </p>
                        </dd>
                        <dt id="freqShift">频率偏移</dt>
                        <dd>
                            <p>前移/后移输出值。</p>
                        </dd>

                        <hr>
                        <div class="pborder">
                            
                            <p id="">对于‘鼓点范围’的说明</p>
                            <div class="tip">
                                <pre>鼓点范围 可以想象为音频频谱条上的“盒子”
有左、右、底和顶
更多的条在盒子内，鼓点值就更大。</pre>
                            </div>

                            <dt id="beatSmooth">平滑鼓点输出</dt>
                            <dd>
                                <p>控制 <value>鼓点</value> 变量的反应平滑度。</p>
                            </dd>

                            <dt id="beatRangeBarFirst">鼓点起始频率比例</dt>
                            <dd>
                                <p>节奏检测的第一个频谱条的索引（盒子的左侧）。设置较低的值会使Beat对低音更敏感，较高的值会对高音更敏感。</p>
                            </dd>
                            <dt id="beatRangeBarLast">鼓点结束频率比例</dt>
                            <dd>
                                <p>节奏检测的最后一个频谱条的索引（盒子的右侧）。设置较低的值会使Beat对低音更敏感，较高的值会对高音更敏感。</p>
                            </dd>
                            <dt id="beatRangeValueLower">鼓点最低触发音量</dt>
                            <dd>
                                <p>节奏检测的最低频谱条值（盒子的底部）。</p>
                            </dd>
                            <dt id="beatRangeValueHigher">鼓点最大触发音量</dt>
                            <dd>
                                <p>节奏检测的最高频谱条值（盒子的顶部）。</p>
                            </dd>
                        </div>

                        <hr>

                        <dt id="fftSize">FFT 大小</dt>
                        <dd>
                            <p>频谱处理的输入音频样本数量（快速傅里叶变换采样长度）</p>
                            <p>定义为2的幂次方（例如2 ^ 10 = 1024）</p>
                        </dd>
                    </dl>
                </div>
                <!--2-->
                <hr>
                <!--2-->
                <div class="pborder">
                    <h6>波形</h6>
                    <dl>
                        <dt id="sampleOutCountPower">输出大小幂次</dt>
                        <dd>
                            <p>音频值的输出数量，定义为2的幂次方。 （例如2 ^ 8 = 256）</p>
                        </dd>

                        <hr>

                        <dt id="inputSize">输入大小幂次</dt>
                        <dd>
                            <p>输入音频样本数量，定义为2的幂次方。 （例如2 ^ 8 = 256）</p>
                        </dd>
                    </dl>
                </div>
                <!--2-->
            </dd>
        </dl>
    </div>



    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>